<template>
	<view class="box">
		<!-- <uNavbar :title="titles" bgColor="#Ffffff"> </uNavbar> -->
		<view class="search flex_dq">
			<u-search bgColor="#f7f7f7" searchIconSize="28" v-model.trim="searchName" :actionStyle="actionStyle"
				margin="0 16px 0 0" @clear="clear" @search="changeSearch" animation @custom="cilckCustom"></u-search>
		</view>
		<view class="tab-nav">
			<view class="tab-list-item" v-for="(item,index) in toggleList" :key="index"
				@click="clickToggleHandle(item,index)">
				<view :class="{ active: indexs==index}" class="text">{{ item.label }}</view>
				<view class="line" v-if="indexs==index">

				</view>
			</view>
		</view>
		<!-- 分类  -->
		<view class="ification flex_ld_a" v-if="googsList.length>0 && indexs==0">
			<view class="ification_box flex_dq">
				<text :class="cursor == 1?'active':''" @click="cilckPx(1)">智能排序</text>
			</view>
			<view class="ification_box flex_dq">
				<text :class="cursor == 2?'active':''" @click="cilckPx(2)">销量最高</text>
			</view>
			<view class="ification_box flex_dq" @click="changeTaggle1">
				<text :class="cursor == 3?'active':''">More值排列</text>
				<view v-if="cursor != 3">
					<u-icon name="arrow-down" color="#333333" size="16"></u-icon>
				</view>
				<view v-else>
					<u-icon v-if="jfShow" name="arrow-down" color="#FFC300" size="16"></u-icon>
					<u-icon v-else name="arrow-up" color="#FFC300" size="16"></u-icon>
				</view>
			</view>
			<view class="ification_box flex_dq" @click="changeTaggle2">
				<text :class="cursor == 4?'active':''">价格排列</text>
				<view v-if="cursor != 4">
					<u-icon name="arrow-down" color="#333333" size="16"></u-icon>
				</view>
				<view v-else>
					<u-icon v-if="jgShow" name="arrow-down" color="#FFC300" size="16"></u-icon>
					<u-icon v-else name="arrow-up" color="#FFC300" size="16"></u-icon>
				</view>
			</view>
		</view>

		<view class="goods " v-if=" indexs==0">
			<view class="goods_box flex_Z" v-for="(item,index) in googsList" :key="item.id" @click="goDetails(item.id)">
				<image :src="item.thumb" mode="aspectFill"></image>
				<view class="goods_btm">
					<text class="f28 c3 overflow2">{{item.name}}</text>

					<view class=" flex_dq">
						<text class="f24 c0  gradient1 integral" v-if="item.is_not_sale == 0">+ {{item.integral_proportion}}%More值</text>
						<text class="f24 c0  gradient1 integral" v-if="item.is_not_sale == 1">非卖品</text>
					</view>

					<view class="goods_btm_price flex_ld">
						<view class=" flex_dq">
							<text class="f24 c4">￥</text>
							<text class="f34 c4 fw7 price">{{item.min_price}}</text>
							<text class="f24 c9 delect"
								v-if="Number(item.max_origin_price) > Number(item.min_price)">￥{{item.max_origin_price}}</text>
						</view>
						<text class="f24 c9"
							v-if="Number(item.max_origin_price) < Number(item.min_price)">已抢{{item.total_sales}}件</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tabwrap" v-if="indexs==1">
			<view class="tabitem" v-for="item in tablist" :class="{active2:item.select}"
				@click="clickToggleHandletwo(item)">
				{{item.label}}
			</view>
		</view>
		<view class="mainlist" v-if="indexs==1" v-for="item in googsList2" :key="item.id"
			@click="goMerchantHome(item.id)">
			<image class="images" :src="item.cover" mode="aspectFill"></image>
			<view class="mainright">
				<view class="name">
					{{item.name}}
				</view>
				<view class="detail">
					<view class="wraps">
						距您{{item.distance?item.distance:"999"}}km内 {{item.classify_name}} {{item.address}}
					</view>
					<!-- <text>￥34/人</text> -->
				</view>
				<view class="rate">
					<view class="">
						<image class="tagimage" :src="item.attach.seller_level.name_image" mode="widthFix"></image>
						<image class="rateimg" v-for="item1 in item.attach.seller_level.level_data.image_data"
							:src="item1" mode="aspectFill"></image>
					</view>
					<text class="c6 f24" v-if="item.sales_volume!=0">已售{{item.sales_volume}}单</text>
				</view>
				<view class=" flex_dq" v-if="item.is_marketing">
					<image class="manzeng" :src="baseUrl + '/static/image/manz.png'" mode="aspectFill"></image>
				</view>
				<view class="itemss" v-if="item.goods.length>0" v-for="item1 in  item.goods  " :key="item1.id">
					<view class="wrapleft">
						<view class="tag">团</view>
						<text class="price">￥{{item1.price}}</text>
						<text class="content"> {{item1.name}}</text>
					</view>
					<view class="jifen">
						+{{item1.integral_proportion}}%More值
					</view>
				</view>
				<view class="itemss" v-if="item.goods.length==0 &&item.quick_pay=='1'">
					<view class="wrapleft">
						<view class="tag2">快</view>
						<text class="price">快捷买单</text>
					</view>
					<view class="jifen">
						+{{item.quick_integral_proportion}}%More值
					</view>
				</view>
				<view class="itemss" v-if="item.goods.length==0 &&item.quick_pay=='0'">
					<view class="wrapleft">
						<view class="tag3">到</view>
						<text class="price">到店消费</text>

					</view>

				</view>
			</view>
		</view>
		<noDatas v-if="indexs==1" :xxxList="googsList2" :status="status2"></noDatas>
		<!-- 暂无数据 / 加载更多 -->
		<noDatas v-if="indexs==0" :xxxList="googsList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {
		cloudList
	} from "../../api/cloudMall.js"
	import {
		search
	} from "../../api/local.js"
	import {
		geocoder
	} from "../../api/other.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				page2: 1,
				size2: 10,
				status2: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				searchName: '', //商品
				zoneType: 0,
				categoryId: '', //商品id
				titles: '搜索',
				cursor: 1, //选择哪一分类
				sortField: '', // 排序字段
				sortBy: '', // 排序方式
				jfShow: false,
				jgShow: false,
				googsList: [],
				actionStyle: {
					fontSize: '28rpx',
					color: '#FFC300'
				},
				toggleList: [{
						label: '云猫',
						statusval: "",
						select: true
					}, {
						label: '地猫',
						statusval: "1",
						select: false
					}


				],
				indexs: 0,
				seller_id: "",
				googsList2: [],
				sort_type: 2,
				latitude: "",
				longitude: "",
				cityName: '开启定位', //城市
				tablist: [{
						label: "距离优先",
						select: true,
						type: 2
					},
					{
						label: "信誉优先",
						select: false,
						type: 5
					},
					{
						label: "销量优先",
						select: false,
						type: 3
					}
				],
			}
		},
		onLoad(e) {
			if (e && e.zoneType) {
				this.zoneType = e.zoneType
				this.titles = '推广专区'
			}
			if (uni.getStorageSync("latitude")) {
				this.latitude = uni.getStorageSync("latitude")
				this.longitude = uni.getStorageSync("longitude")
			}
			let levelInfo = uni.getStorageSync('nextFloor') || '';
			console.log(levelInfo);
			if (levelInfo) {
				this.categoryId = levelInfo.id
				this.searchName = levelInfo.name
			}
			if (e && e.type) {
				this.indexs = e.type
				if (this.indexs == 1) {
					this.getlist()
				} else {
					// 云猫商品查询需要传店铺id
					this.seller_id = e.id
					this.initList()
				}
			} else {
				this.initList()
			}

		},
		methods: {
			goMerchantHome(id) {
				console.log(11111);
				uni.navigateTo({
					url: '/pagesMy/groundCat/merchantHomepagew?id=' + id
				})
			},
			clickToggleHandletwo(ele) {
				this.sort_type = ele.type
				this.tablist.forEach(item => item.select = false)
				// this.currLabel = ele.label
				ele.select = true
				this.page2 = 1
				this.getlist()
			},

			clickToggleHandle(ele, index) {
				// this.statusval=ele.statusval
				this.indexs = index
				this.toggleList.forEach(item => item.select = false)
				// this.currLabel = ele.label
				if (this.indexs == 0) {
					this.page = 1

					this.initList()
				}
				if (this.indexs == 1) {
					this.latitude = uni.getStorageSync("latitude")
					this.longitude = uni.getStorageSync("longitude")
					this.page2 = 1
					this.getlist()
				}
				ele.select = true

			},
			// 清空内容
			refreshArray() {
				this.page = 1,
					this.googsList = [],
					this.initList()
			},
			// 初始化
			initList() {
				let data = {
					page: this.page,
					page_size: this.size,
					search_name: this.searchName,
					category_id: this.categoryId,
					sort_field: this.sortField,
					sort_by: this.sortBy,
					zone_type: this.zoneType,
					mask: 1,
					seller_id: this.seller_id
				};
				cloudList(data).then(res => {
					console.log('商品列表', res)
					let list = res.data.data;
					this.googsList = this.page == 1 ? list : this.googsList.concat(list);
					if (list.length < this.size) this.status = 'nomore';
					else this.status = 'loading';
				})
			},
			getlist() {
				let data = {
					page: this.page2,
					page_size: this.size2,
					sort_type: this.sort_type,
					latitude: this.latitude,
					longitude: this.longitude,
					keywords: this.searchName,
					mask: 1
				};
				console.log(data);
				search(data).then(res => {
					console.log('商品列表', res)
					if (res.data.data.length > 0) {
						let list = res.data.data;
						this.googsList2 = this.page2 == 1 ? list : this.googsList2.concat(list);
						console.log(this.googsList2);
						if (list.length < this.size) this.status2 = 'nomore';
						else this.status2 = 'loading';
						console.log(this.status2);
					} else {
						this.googsList2 = []
					}
				})
			},
			// 清空内容
			clear() {
				console.log('清空内容');
				this.searchName = ''
				this.categoryId = ''
			},
			// 回车键触发
			changeSearch() {
				if (this.indexs == 0) {
					console.log('回车键触发');
					this.refreshArray()
				}
				if (this.indexs == 1) {
					this.page2 = 1
					this.getlist()
				}

			},
			// 点击搜索按钮触发
			cilckCustom() {
				if (this.indexs == 0) {
					console.log('回车键触发');
					this.refreshArray()
				}
				if (this.indexs == 1) {
					this.page2 = 1
					this.getlist()
				}
			},
			cilckPx(e) {
				console.log(e);
				this.cursor = e
				this.sortBy = ''
				if (e == 1) {
					this.sortField = ''
				} else if (e == 2) {
					this.sortField = 'sales'
				}
				this.refreshArray()
			},
			changeTaggle1() {
				this.cursor = 3
				this.jfShow = !this.jfShow
				this.jgShow = false
				this.sortField = 'integral_proportion'
				if (this.jfShow) {
					this.sortBy = 'desc'
				} else {
					this.sortBy = 'asc'
				}
				this.refreshArray()
			},
			changeTaggle2() {
				this.cursor = 4
				this.sortField = 'price'
				this.jgShow = !this.jgShow
				this.jfShow = false
				if (this.jgShow) {
					this.sortBy = 'desc'
				} else {
					this.sortBy = 'asc'
				}
				this.refreshArray()
			},
			// 去详情
			goDetails(id) {
				uni.navigateTo({
					url: '/pagesMy/cloudCat/goodsDetails?id=' + id
				})
			}

		},
		onUnload() {
			console.log('触发卸载');
			uni.removeStorageSync("nextFloor")
		},
		// 下拉刷新
		onPullDownRefresh() {
			if (this.indexs == 0) {
				console.log('下拉刷新');
				let that = this;
				setTimeout(function() {
					that.page = 1
					that.cursor = 1
					that.refreshArray()
				}, 800);
			}
			if (this.indexs == 1) {
				console.log('下拉刷新');
				let that = this;
				setTimeout(function() {
					that.page2 = 1
					that.getlist()
				}, 800);
			}

		},
		//触底加载
		onReachBottom() {
			if (this.indexs == 0) {
				console.log('触底加载');
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.initList()
				}
			} else {
				console.log('触底加载');
				if (this.status2 != 'nomore') {
					this.page2 = this.page2 + 1
					this.getlist()
				}
			}

		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style scoped lang="scss">
	.search {
		width: 690rpx;
		height: 72rpx;
		background: #F7F7F7;
		border-radius: 40rpx;
		margin: 24rpx auto;
	}

	.rate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.tabwrap {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		position: relative;
		z-index: 996;
		padding-bottom: 30rpx;

		.tabitem {
			width: 156rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 102rpx 102rpx 102rpx 102rpx;
			text-align: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			line-height: 52rpx;
			margin-right: 20rpx;
		}
	}

	.active2 {
		background: #FCE2A5 !important;
		color: #3D3D3D !important;
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		// position: fixed;

		// z-index: 999;
		justify-content: space-around;

		.tab-list-item {
			position: relative;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx;
				opacity: 1;
				font-weight: 500;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
				z-index: 99;
				position: relative;
			}

			.active {
				font-weight: 700;
				color: #333333;
				z-index: 98;
				position: relative;
			}

			.line {
				width: 66rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
				border-radius: 118rpx 118rpx 118rpx 118rpx;
				position: absolute;
				top: 85%;
				left: 50%;
				transform: translate(-50%);
				z-index: 60;
			}
		}
	}

	.ification {
		width: 690rpx;
		margin: 30rpx auto;
	}

	.ification_box {
		font-size: 26rpx;
		color: #333333;
	}

	.active {
		color: #FFC300;
	}

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		margin: 0rpx auto;
	}

	.manzeng {
		width: 250rpx;
		height: 36rpx;
		margin-top: 12rpx;
	}

	.goods_box {
		width: 336rpx;
		height: 550rpx;
		border-radius: 20rpx;
		background: #ffffff;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
	}

	.goods_box>image {
		width: 336rpx;
		height: 336rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.goods_btm {
		width: 100%;
		padding: 10rpx;
	}
	.gradient1{
		// background: pink;
		margin-top: 4rpx;
	}
	.integral {
		padding: 4rpx 14rpx;
		border-radius: 10rpx;
	}

	.goods_btm_price {
		margin-top: 20rpx;
	}

	.price {
		margin-right: 6rpx;
	}

	.mainlist {
		width: 690rpx;
		min-height: 230rpx;
		background: #FFFFFF;
		// border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		padding-bottom: 30rpx;
		position: relative;
		border-bottom: 1px solid #f6f6f6;

		.images {
			margin-top: 20rpx;
			margin-left: 14rpx;
			width: 190rpx;
			height: 190rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.mainright {
			width: 460rpx;
			margin-top: 20rpx;
			margin-left: 20rpx;

			.name {
				width: 420rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #3D3D3D;
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏溢出内容 */
				text-overflow: ellipsis;
				/* 显示省略号 */

			}

			.detail {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;

				.wraps {
					width: 350rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏溢出内容 */
					text-overflow: ellipsis;
				}

				>text {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.itemss {
				width: 460rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;

				.wrapleft {
					display: flex;
					align-items: center;

					width: 320rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;

					.tag {
						width: 28rpx;
						height: 28rpx;
						background: rgba(253, 48, 63, 0.6);
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						text-align: center;
						line-height: 28rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}

					.tag2 {
						width: 28rpx;
						height: 28rpx;
						background: #60CAFE;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						text-align: center;
						line-height: 28rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}

					.tag3 {
						width: 28rpx;
						height: 28rpx;
						background: #FC6414;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						text-align: center;
						line-height: 28rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}

					.price {
						font-weight: 500;
						font-size: 24rpx;
						color: #E78C4C;
						margin-left: 8rpx;
					}

					.content {
						width: 180rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						white-space: nowrap;
						/* 防止文本换行 */
						overflow: hidden;
						/* 隐藏溢出内容 */
						text-overflow: ellipsis;
					}
				}

				.jifen {
					width: 150rpx;
					height: 32rpx;
					background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
					line-height: 32rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.rateimg {
		width: 30rpx;
		height: 30rpx;
		margin: 6rpx;
	}

	.tagimage {
		width: 126rpx;
		height: 40rpx;
	}
</style>